import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import connectComponent from '../../utils/connectComponent';
import moment from 'moment';
import s from './TopicPage.css';
import Layout from '../../components/Layout';
import TopicRow from '../../components/TopicRow';
import Reply from '../../components/Reply';
import EditorPanel from '../../components/EditorPanel';
import { Col, Button, Panel, Label } from 'react-bootstrap';
import markdown from '../../server/common/markdown';
import * as storage from '../../services/storage';
import { apiPrefix } from '../../config';
require('moment/locale/zh-cn');

const title = 'React Starter Kit';

class TopicPage extends React.Component {

  static contextTypes = {
    setTitle: PropTypes.func.isRequired,
  };

  static propTypes = {
    topicId: PropTypes.string.isRequired,
    topic: PropTypes.shape({
      title: PropTypes.string,
      content: PropTypes.string,
    }).isRequired,
    replies: PropTypes.object,
    currentPage: PropTypes.number,
    pages: PropTypes.number,
  };

  componentWillMount() {
    const { actions } = this.props;
    actions.tryAuth();
  }

  componentDidMount() {
    const { actions, topicId } = this.props;
    actions.getTopicById(topicId);
    actions.getRepliesByTopicId(this.props.topicId);
  }

  _onReply(content) {
    if (content === '') return;
    const { topic, actions } = this.props;
    actions.submitReply(topic._id, content);
  }

  _onMore(nextPage) {
    const { topic, actions } = this.props;
    actions.getMoreRepliesByTopicId(topic._id, nextPage);
  }

  _topicHeaderNode(topic) {
    return (
      <div>
        { topic.author && topic.author.loginname ? (<strong><a className={s.author}>{topic.author.loginname}</a></strong>) : ''}
        <span className={s.time}>{moment(topic.create_at).fromNow()}</span>
      </div>
    );
  }

  _topicTagsNode(tags) {
    const html = [];
    tags = tags === '' ? [] : tags.split(',');
    tags.forEach((item, key) => {
      html.push((<Label bsStyle="info">{item}</Label>));
      html.push(('　'));
    });
    return html;
  }

  _editorNode(id) {
    const isLogin = storage.isLogin();
    if (isLogin) {
      return (<EditorPanel
        isLogin={isLogin}
        uploadUrl={`${apiPrefix.data}/upload`}
        parentId={id}
        onSubmit={this._onReply.bind(this)}
      />);
    }
    return (<p>登录后再评论</p>);
  }

  render() {
    const { topic } = this.props;
    const { _id, title, content, mdType, tags = '' } = topic;
    const { replies, currentPage, pages } = this.props.replies;
    const html = `<div class="markdown-body">${markdown(content)}</div>`;
    return (
      <Layout>
        <Col className="col-sm-8 col-sm-offset-2" className={s.clear_padding}>
          <h3>{title}</h3>
          {this._topicTagsNode(tags)}
          <h4 />
          <Panel header={this._topicHeaderNode(topic)}>
            <div dangerouslySetInnerHTML={{ __html: html }} />
          </Panel>
          <Reply items={replies} onMore={this._onMore.bind(this)} currentPage={currentPage} pages={pages} />
          {this._editorNode(_id)}
        </Col>
      </Layout>
    );
  }
}

export const LayoutComponent = withStyles(s)(TopicPage);
export function mapStateToProps(state, props) {
  return {
    topic: state.home.topic || {},
    replies: state.home.replies || [],
  };
}
